<template>
  <div class="container">
    <div class="sidebar">
      <a-table
        :columns="columnsTree"
        :data="data.treeData"
        :pagination="false"
        @row-click="rowClickFunc"
        class="my-table"
      >
        <template #tr="{ record }">
          <tr :class="data.actRow === record.satelliteId ? 'my-tr' : ''"></tr>
        </template>
      </a-table>
    </div>
    <div class="main-content">
      <a-tabs v-model:active-key="activeKey">
        <a-tab-pane key="threshold" title="多级门限">
          <Threshold v-if="activeKey === 'threshold'" :satelliteId="data.actRow" :satelliteCode="data.satelliteCode" />
        </a-tab-pane>
        <a-tab-pane key="monitor" title="常值监测">
          <Monitor v-if="activeKey === 'monitor'" :satelliteId="data.actRow" :satelliteCode="data.satelliteCode" />
        </a-tab-pane>
        <a-tab-pane key="analyze" title="关联分析">
          <Analyze v-if="activeKey === 'analyze'" :satelliteId="data.actRow" :satelliteCode="data.satelliteCode" />
        </a-tab-pane>
        <a-tab-pane key="dataCompute" title="时序数据计算">
          <DataCompute
            v-if="activeKey === 'dataCompute'"
            :satelliteId="data.actRow"
            :satelliteCode="data.satelliteCode"
          />
        </a-tab-pane>
        <a-tab-pane key="model" title="复杂模型">
          <Model v-if="activeKey === 'model'" :satelliteId="data.actRow" :satelliteCode="data.satelliteCode" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup="">
import { ref, reactive, onMounted } from 'vue'
import { apiHome } from '@/api'
import Threshold from './threshold/index.vue'
import Monitor from './monitor/index.vue'
import Analyze from './analyze/index.vue'
import Model from './model/index.vue'
import DataCompute from './dataCompute/index.vue'

const activeKey = ref('threshold')

const columnsTree = [
  {
    title: '卫星',
    dataIndex: 'satelliteName'
  }
]

const data = reactive({
  treeData: [],
  actRow: '',
  satelliteCode: ''
})

const getTreeData = () => {
  apiHome.satellites().then((res) => {
    if (+res.code === 200) {
      data.treeData = res.data || []
      data.actRow = res.data[0].satelliteId
      data.satelliteCode = res.data[0].satelliteCode
      console.log(data.actRow, 'data.actRow ')
    }
  })
}

const rowClickFunc = (record) => {
  data.actRow = record.satelliteId
  data.satelliteCode = record.satelliteCode
}

onMounted(() => {
  getTreeData()
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 250px;
  padding: 20px;
  border-right: 1px solid #f0f0f0;
}

h2 {
  text-align: center;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei,
    serif;
  font-weight: bold;
  font-size: 18px;
  color: #222222;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.settings {
  margin-bottom: 20px;
}

.lookBtn {
  color: #1d68d0;
}

.modelCont {
  width: 860px;
}

.btnBox {
  display: flex;

  div {
    margin-right: 10px;
    cursor: pointer;
  }
}

.my-tr {
  background: #1d68d0;
  color: #fff;

  :deep(td) {
    background: #1d68d0;
    color: #fff;
  }
}

.my-tr :hover {
  background: #1d68d0;
  color: #fff;
}

.my-table tr {
  cursor: pointer;
}
</style>
